<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>编辑</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <el-form ref="form" :model="form" label-width="80px">
            <div v-if="!isPower">
                <el-form-item label="用户名">
                    <el-input v-model="form.name" :placeholder='user_msg.username'></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" :placeholder='user_msg.email'></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.phone" :placeholder='user_msg.phone'></el-input>
                </el-form-item>
                <el-form-item label="收件地址">
                    <el-select placeholder="请选择省" v-model="province">
                        <el-option v-for="(item,index) in json_list" :key="index" :label="item.name" :value="index"></el-option>
                    </el-select>
                    <el-select placeholder="请选择市" v-model="city" v-if='this.province'>
                        <el-option v-for="(item,index) in json_list[this.province]['city']" :key="index" :label="item.name" :value="index"></el-option>
                    </el-select>
                    <el-select placeholder="请选择县" v-model="county" v-if='this.city'>
                        <el-option v-for="(item,index) in json_list[this.province]['city'][this.city]['area']" :key="index" :label="item.name" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公司">
                    <el-select v-model="form.companys" placeholder="请选择">
                    <el-option v-for="(item,index) in company_list" :key='index' :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div v-if="isPower">
                <el-form-item label="申请人">
                    <el-input placeholder="申请人" :value="username" v-model="formInline.user"></el-input>
                </el-form-item>
                <el-form-item label="申请权限">
                    <el-select v-model="formInline.apply" placeholder="权限分类">
                    <el-option label="客户" value="1"></el-option>
                    <el-option label="仓库" value="2"></el-option>
                    <el-option label="商家" value="3"></el-option>
                    <el-option label="客服" value="4"></el-option>
                    <el-option label="管理员" value="5"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button @click="isPowers" v-if="!isPower">申请</el-button>
                <el-button type="primary" @click="onSubmit" v-if="!isPower">提交修改</el-button>
                <el-button type="primary" @click="onApply" v-if="isPower">提交申请</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    
</template>
<script>
    import {get_city_code, get_user_msg_get, get_update_get, get_apply_get, get_company_list_get} from './axios_api/api.js'
    export default {
        data() {
            return {
                form: {
                    name: '',
                    email: '',
                    phone: '',
                    companys: '',
                },
                formInline: {
                    user: '',
                    apply: ''
                },
                username: localStorage.getItem('username'),
                isPower: false,
                json_list: [],
                company_list: [],
                province: '',
                city: '',
                county: '',
                user_msg: []
            }
        },
        mounted() {
            this.get_city();
            this.get_user_msg();
            this.get_company_list()
        },
        methods: {
            // 获取公司的详细信息
            get_company_list(){
                get_company_list_get().then(res => {
                    console.log(res)
                    this.company_list = res.company_list;
                })
            },
            // 获取当前用户的详细信息
            get_user_msg(){
                get_user_msg_get({uid: localStorage.getItem('uid')}).then(res => {
                    console.log(res)
                    this.user_msg = res.user
                })
            },
            // 获取城市信息
            get_city(){
                get_city_code().then(res => {
                    console.log(res)
                    this.json_list = res.json_list
                })
            },
            // 提交按钮
            onSubmit() {
                // 检验提交的用户名,邮箱,手机号
                let username=this.form.name,email=this.form.email,phone=this.form.phone,company=this.form.companys;
                if(!username){
                    username = this.username
                }
                // 拼接收件地址
                let address;
                if(this.province && this.city && this.county){
                    address = this.json_list[this.province].name + '' + this.json_list[this.province]['city'][this.city].name + '' + this.json_list[this.province]['city'][this.city]['area'][this.county].name + '';
                }else if(this.province && this.city){
                    address = this.json_list[this.province].name + '' + this.json_list[this.province]['city'][this.city].name
                }else if(this.province){
                    address = this.json_list[this.province].name
                }else{
                    address = ''
                }
                get_update_get({uid: localStorage.getItem('uid'), username: username, email: email, phone: phone,address: address,company: company}).then(res => {
                    console.log(res);
                })
            },
            // 权限修改框
            isPowers() {
                this.isPower = !this.isPower
            },
            // 取消编辑,回转主页
            cancel() {
                this.$router.push('/')
            },
            // 权限修改申请提交
            onApply() {
                if(!this.formInline.user){
                    this.formInline.user = this.username
                }
                console.log(this.formInline)
                get_apply_get(this.formInline).then(res => {
                    console.log(res);
                    alert(res.message);
                    this.$router.push('/')
                })
            }
        }
  }
</script>